<template>
  <div class="image-preview">
    <div v-if="currentImage" class="preview-container">
      <img :src="currentImage.url" :alt="currentImage.id" />
      
      <div class="annotations">
        <div v-for="annotation in currentImage.annotations" 
             :key="annotation.timestamp"
             class="annotation-item">
          <span>{{ annotation.type }}</span>
          <pre>{{ JSON.stringify(annotation.data, null, 2) }}</pre>
        </div>
      </div>
    </div>
    
    <div class="image-list">
      <div v-for="image in images" 
           :key="image.id" 
           class="image-thumbnail"
           :class="{ active: currentImage?.id === image.id }"
           @click="$emit('select', image)">
        <img :src="image.url" :alt="image.id" />
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  images: {
    type: Array,
    required: true
  },
  currentImage: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['select', 'annotate'])
</script>

<style scoped>
.image-preview {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  padding: 1rem;
}

.preview-container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
}

.preview-container img {
  max-width: 100%;
  height: auto;
}

.annotations {
  width: 300px;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
}

.annotation-item {
  margin-bottom: 1rem;
  padding: 0.5rem;
  background: white;
  border-radius: 4px;
}

.image-list {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem;
}

.image-thumbnail {
  width: 100px;
  height: 100px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
}

.image-thumbnail.active {
  border-color: #4a90e2;
}

.image-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style> 